<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue过度效果的测试</title>
    <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/97/sqs1plm5/vue.min.js"></script>
</head>

<body>
<div id="app">
    <div v-if="show" v-bind:transition="'expand'">hello</div>
    <button @click="showme">点击我</button>
</div>
</body>

</html>
<style>/* 必需 */

.expand-transition {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
}

/* .expand-enter 定义进入的开始状态 */
/* .expand-leave 定义离开的结束状态 */

.expand-enter,
.expand-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}</style>
<script>new Vue({
    el: '#app',
    data: {
        show: true,
    },
    methods: {
        showme: function () {
            if (this.show) {
                this.show = false;
            } else {
                this.show = true;
            }
        }
    },
});</script>

<!-- Generated by RunJS (Tue Aug 22 13:19:31 CST 2017) 1ms -->